<ng-template #tplOriginContent><ng-content></ng-content></ng-template>
<!-- Compatible: the <ng-content> can appear only once -->

<div [nzNoAnimation]="nzNoAnimation">
  <div
    *ngIf="mask"
    class="ant-modal-mask"
    [ngClass]="maskAnimationClassMap"
    [class.ant-modal-mask-hidden]="hidden"
    [ngStyle]="nzMaskStyle"
    [style.zIndex]="nzZIndex"
  ></div>
  <div
    (click)="onClickMask($event)"
    (mouseup)="onDialogUp()"
    class="ant-modal-wrap {{ nzWrapClassName }}"
    [style.zIndex]="nzZIndex"
    [style.visibility]="hidden ? 'hidden' : null"
    tabindex="-1"
    role="dialog"
  >
    <div
      #modalContainer
      class="ant-modal {{ nzClassName }}"
      (mousedown)="onMaskDialogDown()"
      [ngClass]="modalAnimationClassMap"
      [ngStyle]="nzStyle"
      [style.width]="nzWidth | nzToCssUnit"
      [style.transform-origin]="transformOrigin"
      role="document"
    >
      <div class="ant-modal-content">
        <button
          *ngIf="nzClosable"
          (click)="onClickCloseBtn()"
          class="ant-modal-close"
          aria-label="Close"
        >
          <span class="ant-modal-close-x">
            <ng-container *nzStringTemplateOutlet="nzCloseIcon">
              <i nz-icon [nzType]="nzCloseIcon" class="ant-modal-close-icon"></i>
            </ng-container>
          </span>
        </button>
        <ng-container *ngIf="!hidden" [ngSwitch]="true">
          <ng-container
            *ngSwitchCase="isModalType('default')"
            [ngTemplateOutlet]="tplContentDefault"
          ></ng-container>
          <ng-container
            *ngSwitchCase="isModalType('confirm')"
            [ngTemplateOutlet]="tplContentConfirm"
          ></ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</div>

<!-- [Predefined] Default Modal Content -->
<ng-template #tplContentDefault>
  <div *ngIf="nzTitle" class="ant-modal-header">
    <div class="ant-modal-title">
      <ng-container [ngSwitch]="true">
        <ng-container
          *ngSwitchCase="isTemplateRef(nzTitle)"
          [ngTemplateOutlet]="nzTitle"
        ></ng-container>
        <ng-container *ngSwitchCase="isNonEmptyString(nzTitle)"
          ><div [innerHTML]="nzTitle"></div
        ></ng-container>
      </ng-container>
    </div>
  </div>
  <div class="ant-modal-body" [ngStyle]="nzBodyStyle">
    <ng-container #bodyContainer>
      <ng-container *ngIf="!isComponent(nzContent)" [ngSwitch]="true">
        <ng-container
          *ngSwitchCase="isTemplateRef(nzContent)"
          [ngTemplateOutlet]="nzContent"
        ></ng-container>
        <ng-container *ngSwitchCase="isNonEmptyString(nzContent)"
          ><div [innerHTML]="nzContent"></div
        ></ng-container>
        <ng-container *ngSwitchDefault [ngTemplateOutlet]="tplOriginContent"></ng-container>
      </ng-container>
    </ng-container>
  </div>
  <div *ngIf="nzFooter !== null" class="ant-modal-footer">
    <ng-container [ngSwitch]="true">
      <ng-container
        *ngSwitchCase="isTemplateRef(nzFooter)"
        [ngTemplateOutlet]="nzFooter"
      ></ng-container>
      <ng-container *ngSwitchCase="isNonEmptyString(nzFooter)"
        ><div [innerHTML]="nzFooter"></div
      ></ng-container>
      <ng-container *ngSwitchCase="isModalButtons(nzFooter)">
        <button
          *ngFor="let button of nzFooter"
          nz-button
          (click)="onButtonClick(button)"
          [hidden]="!getButtonCallableProp(button, 'show')"
          [nzLoading]="getButtonCallableProp(button, 'loading')"
          [disabled]="getButtonCallableProp(button, 'disabled')"
          [nzType]="button.type"
          [nzShape]="button.shape"
          [nzSize]="button.size"
          [nzGhost]="button.ghost"
        >
          {{ button.label }}
        </button>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <button
          *ngIf="nzCancelText !== null"
          nz-button
          (click)="onClickOkCancel('cancel')"
          [nzLoading]="nzCancelLoading"
          [disabled]="nzCancelDisabled"
        >
          {{ cancelText }}
        </button>
        <button
          *ngIf="nzOkText !== null"
          nz-button
          [nzType]="nzOkType"
          (click)="onClickOkCancel('ok')"
          [nzLoading]="nzOkLoading"
          [disabled]="nzOkDisabled"
        >
          {{ okText }}
        </button>
      </ng-container>
    </ng-container>
  </div>
</ng-template>
<!-- /[Predefined] Default Modal Content -->

<!-- [Predefined] Confirm Modal Content -->
<ng-template #tplContentConfirm>
  <div class="ant-modal-body" [ngStyle]="nzBodyStyle">
    <div class="ant-modal-confirm-body-wrapper">
      <div class="ant-modal-confirm-body">
        <i nz-icon [nzType]="nzIconType"></i>
        <span class="ant-modal-confirm-title">
          <ng-container [ngSwitch]="true">
            <ng-container
              *ngSwitchCase="isTemplateRef(nzTitle)"
              [ngTemplateOutlet]="nzTitle"
            ></ng-container>
            <ng-container *ngSwitchCase="isNonEmptyString(nzTitle)"
              ><span [innerHTML]="nzTitle"></span
            ></ng-container>
          </ng-container>
        </span>
        <div class="ant-modal-confirm-content">
          <ng-container #bodyContainer>
            <ng-container *ngIf="!isComponent(nzContent)" [ngSwitch]="true">
              <ng-container
                *ngSwitchCase="isTemplateRef(nzContent)"
                [ngTemplateOutlet]="nzContent"
              ></ng-container>
              <ng-container *ngSwitchCase="isNonEmptyString(nzContent)"
                ><div [innerHTML]="nzContent"></div
              ></ng-container>
              <ng-container *ngSwitchDefault [ngTemplateOutlet]="tplOriginContent"></ng-container>
            </ng-container>
          </ng-container>
        </div>
      </div>
      <div class="ant-modal-confirm-btns">
        <button
          *ngIf="nzCancelText !== null"
          nz-button
          (click)="onClickOkCancel('cancel')"
          [nzLoading]="nzCancelLoading"
          [disabled]="nzCancelDisabled"
        >
          {{ cancelText }}
        </button>
        <button
          #autoFocusButtonOk
          *ngIf="nzOkText !== null"
          nz-button
          (click)="onClickOkCancel('ok')"
          [nzType]="nzOkType"
          [nzLoading]="nzOkLoading"
          [disabled]="nzOkDisabled"
        >
          {{ okText }}
        </button>
      </div>
    </div>
    <!-- /.ant-modal-confirm-body-wrapper -->
  </div>
</ng-template>
<!-- /[Predefined] Confirm Modal Content -->
